<template>
  <div class="cityList">
    <!-- 导航栏 -->
    <div class="navBar">
      <div>
        <van-icon name="arrow-left" @click="onClickLeft"/>
        <span>城市选择</span>
      </div>
    </div>
    <!-- 列表 -->
    <van-index-bar ref="indexBar" :index-list="cityIndex" :sticky="false" @select="select">
      <div v-for="(item,index) in cityIndex" :key="item">
        <van-index-anchor :index="item" :class="index===0?'index1':''">{{hanldeName(item)}}</van-index-anchor>
        <van-cell v-for="value in cityValue[item]" @click="selectCity(value)" :title="value.label"/>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { request, getCity, setCity } from "../utils/index.js";
import { log } from "util";
export default {
  data() {
    return {
      cityIndex: [],
      cityValue: {},
      currentCity: {},
      whiteList: ["广州", "上海", "北京", "深圳"]
    };
  },
  async created() {
    const city = await getCity();
    this.currentCity = city;
    //   获取城市数据
    const res = await request.get("/area/city", {
      params: {
        level: 1
      }
    });
    this.handleList(res.data.body);
    //  获取热门城市数据
    await this.getHotCity();
  },
  methods: {
    //   获取当前定位
    async getCity() {
      const res = await getCity();
      this.currentCity = res;
    },
    // 处理城市数据
    handleList(list) {
      const cityIndex = [];
      const cityValue = {};
      list.forEach(item => {
        const a = item.short[0].toUpperCase();
        if (cityValue[a]) {
          cityValue[a].push(item);
        } else {
          cityValue[a] = [item];
          cityIndex.push(a);
        }
      });
      cityIndex.sort();
      this.cityIndex = cityIndex;
      this.cityValue = cityValue;
    },
    //  获取热门城市数据
    async getHotCity() {
      const res = await request.get("/area/hot");
      console.log(res.data.body);
      this.cityIndex.unshift("热");
      this.cityValue["热"] = res.data.body;
      this.cityIndex.unshift("#");
      this.cityValue["#"] = [this.currentCity];
    },
    // 处理索引
    hanldeName(item) {
      let value = 0;
      switch (item) {
        case "#":
          value = "当前定位";
          break;
        case "热":
          value = "热门城市";
          break;
        default:
          value = item.toUpperCase();
      }
      return value;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // 选择城市
    selectCity(item) {
      const result = this.whiteList.indexOf(item.label);
      console.log(result);
      if (result === -1) {
        this.$toast("该城市暂无房源");
      } else {
        setCity(item);
        this.$router.go(-1);
      }
    },
    select(item) {}
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-index-bar__sidebar {
  right: 20px;
  .van-index-bar__index {
    padding: 0;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 15px;
    height: 15px;
    font-size: 10px;
  }
  .van-index-bar__index--active {
    background: green;
    border-radius: 50%;
    color: #ffffff;
  }
}
.van-cell {
  height: 50;
  font-size: 16px;
}
/deep/ .van-index-anchor {
  height: 36px;
  font-size: 16px;
}
/deep/ .van-nav-bar .van-icon {
  color: #5f5f5f;
}
.navBar {
  height: 56px;
  line-height: 56px;
  padding-left: 15px;
  span {
    font-size: 20px;
    font-weight: 700px;
    margin-left: 120px;
  }
}
</style>
